<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
	<head>
		<th:block th:include="include :: header('角色数据权限')" />
		<th:block th:include="include :: ztree-css" />
		<style type="text/css">
		.tab-pane {
			padding: 10px;
			margin-top: 0px;
			margin-left: 1px;
			background-color: #FFFFFF;
		    border-radius: 0px 0px 6px 6px;
			box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px;
		}
		</style>
	</head>
	<body class="gray-bg">
		<div class="tabs-container">
			<form class="form-horizontal m" id="form-role-edit">
				<input id="role_id" name="role_id" type="hidden" th:value="${role.roleId}"/>
				<ul class="nav nav-tabs">
                    <li class="active"><a href="#tab-menu" data-toggle="tab" aria-expanded="false">菜单权限</a></li>
                    <li><a id="a-datascope" href="#tab-datascope" data-toggle="tab" aria-expanded="true">数据权限</a></li>
                </ul>

				<div class="tab-content">
					<div id="tab-menu" class="tab-pane active">
						<div class="form-group">
							<div class="col-sm-8">
                                <div class="form-group" style="margin-bottom: 0px;">
                                    <label class="col-sm-2 control-label" style="width: 60px;padding-right: 5px;">控制：</label>
                                    <div class="col-sm-10" style="padding-left: 0px;">
                                        <label class="checkbox-inline" style="font-size: 13px;"><input type="checkbox" value="1" onclick="controlZtree(this, 'menuTree');">展开/折叠</label>
                                        <label class="checkbox-inline" style="font-size: 13px;"><input type="checkbox" value="2" onclick="controlZtree(this, 'menuTree');">全选</label>
                                        <label class="checkbox-inline" style="font-size: 13px;"><input type="checkbox" value="3" onclick="controlZtree(this, 'menuTree');" checked>父子联动</label>
                                    </div>
                                </div>
                                <div id="menuTree" class="ztree ztree-border"></div>
							</div>
						</div>
					</div>
					<div id="tab-datascope" class="tab-pane">
						<div class="form-group">
							<label class="col-sm-3 control-label is-required">数据范围：</label>
							<div class="col-sm-8">
								<select id="data_scope" name="data_scope" class="form-control m-b">
									<option value="1" th:field="${role.dataScope}">全部数据权限</option>
									<option value="2" th:field="${role.dataScope}">自定数据权限</option>
									<option value="3" th:field="${role.dataScope}">本部门数据权限</option>
									<option value="4" th:field="${role.dataScope}">本部门及以下数据权限</option>
									<option value="5" th:field="${role.dataScope}">仅本人数据权限</option>
								</select>
								<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 特殊情况下，设置为“自定数据权限”</span>
							</div>
						</div>
						<div class="form-group" id="authDataScope" th:style="'display:' + @{(${role.dataScope=='2'} ? 'block' : 'none')} + ''">
							<label class="col-sm-3 control-label">数据权限：</label>
							<div class="col-sm-8">
                                <div class="form-group" style="margin-bottom: 5px;">
                                    <label class="col-sm-2 control-label" style="width: 60px;padding-right: 5px;">控制：</label>
                                    <div class="col-sm-10" style="padding-left: 0px;">
                                        <label class="checkbox-inline" style="font-size: 13px;"><input type="checkbox" value="1" onclick="controlZtree(this, 'deptTree');">展开/折叠</label>
                                        <label class="checkbox-inline" style="font-size: 13px;"><input type="checkbox" value="2" onclick="controlZtree(this, 'deptTree');">全选</label>
                                        <label class="checkbox-inline" style="font-size: 13px;"><input type="checkbox" value="3" onclick="controlZtree(this, 'deptTree');" checked>父子联动</label>
                                    </div>
                                </div>
                                <div id="deptTree" class="ztree ztree-border"></div>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>

		<th:block th:include="include :: footer" />
		<th:block th:include="include :: ztree-js" />
		<script type="text/javascript">
            $(function() {
                initMenuTree();//初始化菜单树
                initDeptTree();//初始化部门树

                $("#data_scope").change(function(){
                    var data_scope = $(this).val();
                    if (data_scope == 2) {//自定数据权限
                        $("#authDataScope").show();
                    } else {//其他数据权限
                        var deptTree = $.fn.zTree.getZTreeObj("deptTree");
                        deptTree.checkAllNodes(false);
                        $("#authDataScope").hide();
                    }
                });
		    });

            //控制ztree展开/折叠/全选/父子联动
            function controlZtree(src, treeId) {
                var type = $(src).val();
                var checked = $(src).prop("checked");
                var zTreeObj = $.fn.zTree.getZTreeObj(treeId);
                if (type == 1) {
                    zTreeObj.expandAll(checked);
                } else if (type == 2) {
                    zTreeObj.checkAllNodes(checked);
                } else if (type == 3) {
                    var chkboxType = checked ? { "Y": "ps", "N": "ps" } : { "Y": "", "N": "" };
                    zTreeObj.setting.check.chkboxType = chkboxType;
                }
            }

		    //弹出层form提交
			function submitHandler() {
		        if ($.validate.form()) {
                    var deptIds = $.tree.getTreeCheckedNodes("deptTree");
                    var menuIds = $.tree.getTreeCheckedNodes("menuTree");
                    var data_scope = $("#data_scope").val();
                    if (data_scope == 2 && deptIds == "") {//自定数据权限
                        $("#a-datascope").click();
                        $.modal.alertWarning("自定数据权限时必须选择数据权限！");
                        return;
                    }

                    var url = ctx + "system/role/authDataScope";
                    var params = {
                        "role_id": $("#role_id").val(),
                        "role_name": $("#role_name").val(),
                        "role_key": $("#role_key").val(),
                        "data_scope": $("#data_scope").val(),
                        "deptIds": deptIds,
                        "menuIds": menuIds
                    };

                    $.common.getAjaxData(url, params, 'json',
                        function(resultData) {
                            $.operate.successCallback(resultData);
                        },
                        function(request) {
                            $.modal.alertError("系统错误！");
                        });
		        }
		    }

		    //初始化菜单树
		    function initMenuTree() {
		    	var url = ctx + "system/menu/roleMenuTreeData?role_id=" + $("#role_id").val();
				var options = {
					id: "menuTree",
			        url: url,
			        check: { enable: true },
			        expandLevel: 0
			    };
				$.tree.init(options);
		    }

            //初始化部门树
            function initDeptTree() {
                var url = ctx + "system/dept/roleDeptTreeData?role_id=" + $("#role_id").val();
                var options = {
                    id: "deptTree",
                    url: url,
                    check: { enable: true, nocheckInherit: true, chkboxType: { "Y": "ps", "N": "ps" } },
                    expandLevel: 1
                };
                return $.tree.init(options);
            }
		</script>
	</body>
</html>